<template>
  <div style="background-color:#000">
    <!-- 欢迎界面弹窗 -->
    <div v-if="welcome" class="welcome">
      <img src="/static/home/tankuang.png" alt="" class="welcome-main" @click="goUrl('/realName','realName')">
      <img src="/static/home/tankuang_gb.png" alt="" class="welcome-close" @click="welcome = false">
    </div>
    <div class="main">
      <div class="main-a">
        <div class="main-block"><img src="/static/home/zxfengzhuan.png" alt="">
          <p class="main-block-h">在线封装APP</p>
          <p>一分钟即可在线生成APP<br />93种插件任选</p>
        </div>
      </div>
      <div class="main-b">
        <div class="main-block"><img src="/static/home/appfenfa.png" alt="">
          <p class="main-block-h">APP内测分发</p>
          <p>支持超大APP上传，一键生成下载链接和二维码</p>
        </div>
        <div class="main-text">
          <h3>7*7*24云托管</h3>
          <p>CDN高速下载&nbsp;&nbsp;一键上传永不掉签</p>
        </div>
        <div class="main-block"><img src="/static/home/zengzhiyunfw.png" alt="">
          <p class="main-block-h">增值云服务</p>
          <p>APP上架&nbsp;软著申请<br />APP交易&nbsp;私有部署<br />SSL加密</p>
        </div>
      </div>
      <div class="main-c">
        <button @click="goUrl('/adhibition', 'adhibition')">立即免费试用<img src="/static/home/gengduo2.png" alt=""></button>
      </div>
      <div class="main-d">
        <div class="main-cell cell-a" @mouseenter="enter('cdn')" @mouseleave="leave('cdn')">
          <img :src="'/static/home/cdnxz'+ moucdn +'.png'" alt="">
          <h2>CDN高速下载</h2>
          <p>七牛云CDN极速<br />上传国外G口极速下载</p>
          <div class="cell-dian"></div>
        </div>
        <div class="main-cell cell-b" @mouseenter="enter('mf')" @mouseleave="leave('mf')">
          <img :src="'/static/home/mianfeisy'+ moumf +'.png'" alt="">
          <h2>免费试用</h2>
          <p>任何一款APP都可测试<br />,方便用户测试</p>
          <div class="cell-dian"></div>
        </div>
        <div class="main-cell cell-c" @mouseenter="enter('zz')" @mouseleave="leave('zz')">
          <img :src="'/static/home/zizhushdb'+ mouzz +'.png'" alt="">
          <h2>自助式打包</h2>
          <p>一分钟即可在线生成APP<br />93种插件任选</p>
          <div class="cell-dian"></div>
        </div>
        <div class="main-cell cell-d" @mouseenter="enter('zs')" @mouseleave="leave('zs')">
          <img :src="'/static/home/zhengshuduo'+ mouzs +'.png'" alt="">
          <h2>证书多</h2>
          <p>提供3个独立证书签名<br />备用5个证书替换</p>
          <div class="cell-dian"></div>
        </div>
        <div class="main-cell cell-e" @mouseenter="enter('zd')" @mouseleave="leave('zd')">
          <img :src="'/static/home/yunshipei'+ mouzd +'.png'" alt="">
          <h2>自动云适配</h2>
          <p>适配安卓和苹果的主流<br />机型均可在线内测分发</p>
          <div class="cell-dian"></div>
        </div>
      </div>
      <div class="main-e waves" id="waves">

      </div>
    </div>
    <div class="IOScjq">
      <div class="IOS-a">
        <h1>IOS超级签&nbsp;永不闪退</h1>
        <p>无需上架，免越狱安装，不限制ios设备，无限制安装</p>
      </div>
      <div class="IOS-b">
        <div class="IOS-block" @mouseenter="mouenter" @mouseleave="mouleave">
          <img src="/static/home/24xszdq.png" alt="">
          <div></div>
          <h3>24小时自动签</h3>
          <p>7*7*24小时全自动超级签名，随时随地上传APP，即可签名</p>
        </div>
        <div class="IOS-block" @mouseenter="mouenter" @mouseleave="mouleave">
          <img src="/static/home/yxqmianfeiq.png" alt="">
          <div></div>
          <h3>有效期内免费重签</h3>
          <p>只要在有效期<br />APP企业签名更新，均为免费</p>
        </div>
        <div class="IOS-block" @mouseenter="mouenter" @mouseleave="mouleave">
          <img src="/static/home/xxts.png" alt="">
          <div></div>
          <h3>消息推送</h3>
          <p>给已安装APP的用户<br />推送消息或通知，提高APP的活跃</p>
        </div>
        <div class="IOS-block" @mouseenter="mouenter" @mouseleave="mouleave">
          <img src="/static/home/gfzsaqwd.png" alt="">
          <div></div>
          <h3>官方证书，安全稳定</h3>
          <p>拥有国内外企业签名证书，专业的开发团队<br />分类签名，将保证APP企业签名的安全稳定</p>
        </div>
      </div>
      <button class="IOS-bt" @click="goUrl('/signatureSuper', 'signatureSuper')">了解更多&nbsp;<img
          src="/static/home/gengduo1.png" alt=""></button>
      <div style="height:80px"></div>
    </div>
    <div class="ncsc">
      <div class="ncsc-a">
        <h1>内测发布上传</h1>
        <p>一键上传APP安装包，提供短连接和下载二维码，方便用户下载测试</p>
      </div>
      <div class="ncsc-b">
        <img src="/static/home/sidayoushi.png" alt="" class="wow bounceInLeft" data-wow-duration="1s"
          data-wow-delay="0.5s" data-wow-offset="400">
        <div class="ncsc-p">
          <p>注册账号后<br />每天免费下载次数</p>
          <p>1.5G以内大包<br />且支持一包多传</p>
          <p>一码二用<br />自动识别不同机型</p>
          <p>提供多套下载模板<br />以及APP官网模板</p>
        </div>
      </div>
      <div class="ncsc-c">
        <button class="IOS-bt" @click="goUrl('/price', 'price')">立即发布&nbsp;<img src="/static/home/gengduo1.png"
            alt=""></button>
      </div>
      <div class="ncsc-d">
        <div class="lmy-a">
          <h1>撸码云全球服务</h1>
          <p>撸码云为全球开发者提供专业和稳定的应用分发服务，我们愿与开发者一起学习、交流与成长，共同打造良好的开发者生态圈！</p>
          <button @click="goim()">立即咨询&nbsp;<img src="/static/home/jt.png" alt=""></button>
        </div>
        <div class="lmy-b">
          <div class="lmy-block" @mouseenter="upimg" @mouseleave="stopimg">
            <h2>335897<span /></h2>
            <p>累计在线签名</p>
          </div>
          <div class="lmy-block" @mouseenter="upimg" @mouseleave="stopimg">
            <h2>3798087<span /></h2>
            <p>累计内测发布APP</p>
          </div>
          <div class="lmy-block" @mouseenter="upimg" @mouseleave="stopimg">
            <h2>685245400<span /></h2>
            <p>累计内测下载APP</p>
          </div>
          <div class="lmy-block" @mouseenter="upimg" @mouseleave="stopimg">
            <h2>934000<span /></h2>
            <p>累计注册用户</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import activity from "@/components/Yee/Yee"; //弹窗组件
  import contact from "@/components/common/contact"; //浮动窗体
  import ShaderProgram from '../../utils/index.js'
  import {
    WOW
  } from "wowjs"; //动画
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      activity,
      contact
    },
    data() {
      //这里存放数据
      return {
        //欢迎弹窗
        welcome: false,
        //触摸改变图片
        moucdn: '',
        moumf: '',
        mouzz: '',
        mouzs: '',
        mouzd: '',
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      welcome: function (val) {
        this.welcome = val
      }
    },
    //方法集合
    methods: {
      goUrl(path, name) {
        this.$router.push({
          path: path,
          name: name,
        });
        if (name == "adhibition") {
          window.scrollTo(0, 0);
          sessionStorage.setItem("currentTab_title", name);
          location.reload();
        }
      },
      goim() {
        // window.open("https://im.lumayun.com/kf.html");
        window.open("http://wpa.qq.com/msgrd?v=3&uin=3007685427&site=qq&menu=yes")
      },
      enter(val) {
        switch (val) {
          case 'cdn':
            this.moucdn = '_2'
            break;
          case 'mf':
            this.moumf = '_2'
            break;
          case 'zz':
            this.mouzz = '_2'
            break;
          case 'zs':
            this.mouzs = '_2'
            break;
          case 'zd':
            this.mouzd = '_2'
            break;
        }
      },
      leave(val) {
        switch (val) {
          case 'cdn':
            this.moucdn = ''
            break;
          case 'mf':
            this.moumf = ''
            break;
          case 'zz':
            this.mouzz = ''
            break;
          case 'zs':
            this.mouzs = ''
            break;
          case 'zd':
            this.mouzd = ''
            break;
        }
      },
      mouenter(e) {
        // console.log(e.target.);
        e.target.classList.add("actam");
      },
      mouleave(e) {
        e.target.classList.remove("actam");
      },
      upimg(e) {
        e.target.classList.add("upimg");
      },
      stopimg(e) {
        e.target.classList.remove("upimg");
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      // 仅在整个视图都被渲染之后才会运行的代码
      this.$nextTick(function () {
        const wow = new WOW({
          live: false
        })
        wow.init()
        // 欢迎新用户弹窗
        var that = this;
        if (localStorage.hasOwnProperty("welcome")) {

          let newTime = Number(new Date());
          let oldTime = localStorage.getItem('welcome')
          if (oldTime > newTime) {

            this.welcome = false;
          } else {

            setTimeout(function () {
              that.welcome = true;
            }, 2000);
            let time = new Date();
            time.setDate(time.getDate() + 30);
            time = Number(time);
            localStorage.setItem("welcome", time)
          }
        } else {

          let time = new Date();
          time.setDate(time.getDate() + 30);
          time = Number(time);
          localStorage.setItem("welcome", time)
          setTimeout(function () {

            that.welcome = true;
          }, 2000);
        }
      })
      const pointSize = 3
      const waves = new ShaderProgram(document.querySelector('#waves'), {
        texture: '',
        uniforms: {
          size: {
            type: 'float',
            value: pointSize
          },
          field: {
            type: 'vec3',
            value: [0, 0, 0]
          },
          speed: {
            type: 'float',
            value: 5
          },
        },
        vertex: `
      #define M_PI 3.1415926535897932384626433832795

      precision highp float;

      attribute vec4 a_position;
      attribute vec4 a_color;

      uniform float u_time;
      uniform float u_size;
      uniform float u_speed;
      uniform vec3 u_field;
      uniform mat4 u_projection;

      varying vec4 v_color;

      void main() {

      vec3 pos = a_position.xyz;

      pos.y += (
      cos(pos.x / u_field.x * M_PI * 8.0 + u_time * u_speed) +
      sin(pos.z / u_field.z * M_PI * 8.0 + u_time * u_speed)
      ) * u_field.y;

      gl_Position = u_projection * vec4( pos.xyz, a_position.w );
      gl_PointSize = ( u_size / gl_Position.w ) * 100.0;

      v_color = a_color;

      }`,
        fragment: `
      precision highp float;

      uniform sampler2D u_texture;

      varying vec4 v_color;

      void main() {

      gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord);

      }`,
        onResize(w, h, dpi) {

          const position = [],
            color = []
          const width = 180 * (w / h);
          const depth = 300;
          const height = 9;
          const distance = 1.5;
          for (let x = 0; x < width; x += distance) {
            for (let z = 0; z < depth; z += distance) {
              color.push(0.84, 0.45 - (x / width) * 0.1, 0.05 + x / width * 0.1, z / depth)
              position.push(-width / 2 + x, -20, -depth / 2 + z);
            }
          }
          this.uniforms.field = [width, height, depth];
          this.buffers.position = position;
          this.buffers.color = color;
          this.uniforms.size = (h / 300) * pointSize * dpi;
        },
      });
    },
    beforeDestroy() {
      document.querySelector("body").removeAttribute("style");
    },
  };

</script>
<style scoped>
  /* 内容样式 */

  /* 欢迎界面弹窗 */
  .welcome {
    position: fixed;
    width: 360px;
    height: 420px;
    top: 25vh;
    left: calc(50% - 180px);
    z-index: 300;
    background-color: rgba(30, 30, 30, 0.8);
    border-radius: 15PX;
    padding-top: 25PX;
  }

  .welcome .welcome-close {
    width: 45px;
    margin: auto;
    display: block;
    padding: 10px;
    cursor: pointer;
  }

  .welcome .welcome-main {
    width: 100%;
    cursor: pointer;
  }

  .main {
    width: 100%;
    /* background-image: url("/static/home/zaixianqianappbk.png");
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat; */
    background-color: #000;
    margin: 0px;
    height: auto;
    position: relative;
  }

  .main-a {
    width: 100%;
    padding-top: 60px;
    text-align: center;
    z-index: 50;
  }

  .main-block {
    display: inline-block;
    width: 310px;
    margin: 0px;
    padding: 0px;
    border: 0px;
  }



  .main-block img {
    display: block;
    width: 120px;
    float: left;
  }

  .main-block p {
    width: calc(100% - 160px);
    display: inline-block;
    color: #9a9a9a;
    font-size: 16px;
    text-align: left;
    padding-left: 10px;
  }

  .main-block .main-block-h {
    color: #fff;
    font-size: 18px;
    padding-top: 10px;
  }

  .main-b {
    width: 100%;
    max-width: 1211px;
    display: flex;
    padding-top: 60px;
    margin: auto;
    justify-content: space-between;
    z-index: 50;
  }

  .main-text {
    display: inline-block;
    width: 320px;
    text-align: center;
  }

  .main-text h3 {
    font-size: 38px;
    color: #fff;
    line-height: 70px;
  }

  .main-text p {
    color: #9a9a9a;
    font-size: 18px;
  }

  .main-c {
    width: 100%;
    padding: 60px 0px 60px 0px;
    z-index: 50;
  }

  .main-c button {
    display: block;
    background-image: linear-gradient(to right, #ed8d4e, #f77721);
    border-radius: 30px;
    width: 260px;
    height: 60px;
    color: #fff;
    border: 0px;
    font-size: 24px;
    margin: auto;
    line-height: 36px;
  }

  .main-c button img {
    width: 36px;
    height: 36px;
  }

  .main-d {
    /* width: 100vw; */
    max-width: 1390px;
    padding: 30px 30px 30px 30px;
    margin: auto;
    height: 500px;
    position: relative;
    z-index: 50;
  }

  .main-cell {
    display: inline-block;
    width: 270px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    position: absolute;
  }

  .main-cell img {
    display: block;
    width: 100px;
    float: left;
  }

  .main-cell h2 {
    display: inline-block;
    color: #fff;
    font-size: 18px;
    padding-top: 20px;
    margin: 0px;
    padding-left: 10px;
  }

  .main-cell p {
    width: calc(100% - 100px);
    display: inline-block;
    color: #9a9a9a;
    font-size: 12px;
    text-align: left;
    padding-left: 10px;
  }

  .cell-a {
    top: 0px;
    left: 2vw;
  }

  .cell-b {
    top: 40px;
    left: calc(2vw + 250px);
  }

  .cell-c {
    top: 0px;
    left: calc(2vw + 500px);
  }

  .cell-d {
    top: 40px;
    left: calc(2vw + 750px);
  }

  .cell-e {
    top: 0px;
    left: calc(2vw + 1000px);
  }

  .cell-dian {
    width: 1px;
    height: 120px;
    background-image: linear-gradient(to bottom, #fa781d, #000, #000);
    background-size: 2px 8px;
    background-repeat: repeat-y;
    margin: 0px;
    position: relative;
    top: 18px;
    left: 50px;
  }

  .main-e {
    width: 100%;
    position: absolute;
    height: 300px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: #000;
    z-index: 1;
    overflow: hidden;
  }

  .main-e canvas {
    z-index: 1;
  }

  .main-e .IOScjq {
    background-image: url("/static/home/chaoqianbk.jpg");
    background-color: #000;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
  }

  .IOS-a {
    margin-top: 60px;
    padding: 30px 0px;
    width: 100%;
  }

  .IOS-a h1 {
    font-size: 38px;
    color: #fff;
    text-align: center;
  }

  .IOS-a p {
    font-size: 18px;
    color: #ccc;
    text-align: center;
  }

  .IOS-b {
    width: 100%;
    padding: 60px 20vw 0px 20vw;
    margin: 0px;
    display: flex;
    justify-content: space-between;

  }

  .IOS-block {
    width: 14vw;
    text-align: center;
    position: relative;
  }

  .IOS-block img {
    width: 140px;
    position: absolute;
    left: calc(7vw - 70px);
    top: 0px;
  }

  .IOS-block div {
    /* padding-top: 160px; */
    width: 30px;
    height: 6px;
    border: 0ox;
    border-radius: 15px;
    background-color: #ccc;
    margin: auto;
    position: absolute;
    left: calc(7vw - 15px);
    top: 165px;
  }

  .IOS-block h3 {
    margin-top: 200px;
    text-align: center;
    color: #fff;
    font-size: 18px;
  }

  .IOS-block p {
    margin-top: 15px;
    text-align: center;
    color: #ccc;
    font-size: 12px;
  }

  .IOS-bt {
    display: block;
    border-radius: 30px;
    width: 240px;
    height: 60px;
    color: #ff6802;
    border: 2px solid #ff6802;
    font-size: 24px;
    margin: 100px auto 0px auto;
    line-height: 36px;
    background-color: transparent;
  }

  .IOS-bt img {
    width: 36px;
    height: 36px;
  }

  .IOS-block.actam img {
    -webkit-animation: myimg 1s;
    -moz-animation: myimg 1s;
    -o-animation: myimg 1s;
    animation: myimg 1s;
  }

  .IOS-block.actam div {
    -webkit-animation: actdiv 1s;
    -moz-animation: actdiv 1s;
    -o-animation: actdiv 1s;
    animation: actdiv 1s;
  }

  @-moz-keyframes myimg {
    0% {
      width: 140px;
      top: 0px;
      left: calc(7vw - 70px);

    }

    50% {
      width: 180px;
      top: -60px;
      left: calc(7vw - 90px);
    }

    100% {
      width: 140px;
      top: 0px;
      left: calc(7vw - 70px);
    }
  }

  @-o-keyframes myimg {
    0% {
      width: 140px;
      top: 0px;
      left: calc(7vw - 70px);

    }

    50% {
      width: 180px;
      top: -60px;
      left: calc(7vw - 90px);
    }

    100% {
      width: 140px;
      top: 0px;
      left: calc(7vw - 70px);
    }
  }

  @keyframes myimg {
    0% {
      width: 140px;
      top: 0px;
      left: calc(7vw - 70px);

    }

    50% {
      width: 180px;
      top: -60px;
      left: calc(7vw - 90px);
    }

    100% {
      width: 140px;
      top: 0px;
      left: calc(7vw - 70px);
    }
  }

  @-webkit-keyframes myimg {
    0% {
      width: 140px;
      top: 0px;
      left: calc(7vw - 70px);

    }

    50% {
      width: 180px;
      top: -60px;
      left: calc(7vw - 90px);
    }

    100% {
      width: 140px;
      top: 0px;
      left: calc(7vw - 70px);
    }
  }

  @-moz-keyframes actdiv {
    0% {
      width: 30px;
      height: 6px;
      left: calc(7vw - 15px);
    }

    50% {
      width: 50px;
      height: 8px;
      left: calc(7vw - 25px);
    }

    100% {
      width: 30px;
      height: 6px;
      left: calc(7vw - 15px);
    }
  }

  @-o-keyframes actdiv {
    0% {
      width: 30px;
      height: 6px;
      left: calc(7vw - 15px);
    }

    50% {
      width: 50px;
      height: 8px;
      left: calc(7vw - 25px);
    }

    100% {
      width: 30px;
      height: 6px;
      left: calc(7vw - 15px);
    }
  }

  @keyframes actdiv {
    0% {
      width: 30px;
      height: 6px;
      left: calc(7vw - 15px);
    }

    50% {
      width: 50px;
      height: 8px;
      left: calc(7vw - 25px);
    }

    100% {
      width: 30px;
      height: 6px;
      left: calc(7vw - 15px);
    }
  }

  @-webkit-keyframes actdiv {
    0% {
      width: 30px;
      height: 6px;
      left: calc(7vw - 15px);
    }

    50% {
      width: 50px;
      height: 8px;
      left: calc(7vw - 25px);
    }

    100% {
      width: 30px;
      height: 6px;
      left: calc(7vw - 15px);
    }
  }

  .ncsc {
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-image: url("/static/home/ysbk.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .ncsc-a {
    width: 100%;
    text-align: center;
    margin-top: 120px;
  }

  .ncsc-a h1 {
    font-size: 38px;
    color: #fff;
    text-align: center;
  }

  .ncsc-a p {
    font-size: 18px;
    color: #ccc;
    text-align: center;
  }

  .ncsc-b {
    width: 100%;
    margin-top: 120px auto;
    padding: 60px;
    text-align: center;
  }

  .ncsc-b img {
    width: 62vw;
    max-width: 1200px;
  }

  .ncsc-p {
    width: 62vw;
    max-width: 1200px;
    margin: auto;

  }

  .ncsc-p p {
    display: inline-block;
    width: 24%;
    margin-top: 40px;
    color: #ccc;
    font-size: 18px;
  }

  .ncsc-c button {
    display: block;
    border-radius: 30px;
    width: 240px;
    height: 60px;
    color: #ff6802;
    border: 2px solid #ff6802;
    font-size: 24px;
    margin: 60px auto 0px auto;
    line-height: 36px;
    background-color: transparent;
  }


  .ncsc-d {

    width: 1200px;
    padding: 140px 0px 60px 0px;
    margin: auto;
  }

  .lmy-a {
    width: 600px;
    display: inline-block;
    vertical-align: top;
  }

  .lmy-a h1 {
    margin: 0px;
    padding: 0px;
    font-size: 40px;
    color: #fff;
  }

  .lmy-a p {
    margin-top: 60px;
    padding: 0px;
    font-size: 16px;
    color: #fff;
  }

  .lmy-a button {
    background-color: #fc7111;
    border-radius: 3px;
    width: 110px;
    height: 45px;
    color: #ffe1d5;
    border: 0px;
    font-size: 14px;
    line-height: 20px;
    margin-top: 60px;
  }

  .lmy-a button img {
    height: 16px;
  }

  .lmy-b {
    width: 500px;
    display: inline-block;
    margin-left: 90px;
  }

  .lmy-block {
    width: 250px;
    height: 150px;
    display: block;
    margin: 0px;
    float: left;
  }

  .lmy-block h2 {
    margin: 0px;
    padding: 0px;
    font-size: 34px;
    color: #fff;
    line-height: 36px;
  }

  .lmy-block h2 span {
    display: inline-block;
    height: 38px;
    width: 25px;
    background-image: url("/static/home/fuwujt.png");
    background-position: 0px 0px;
    margin-left: 5px;
  }

  .lmy-block.upimg h2 span {
    -webkit-animation: scrollToUp 1s linear infinite;
    animation: scrollToUp 1s linear infinite;
  }

  @-webkit-keyframes scrollToUp {
    0% {
      background-position-y: 0px;
    }

    100% {
      background-position-y: -40px;
    }
  }

  @keyframes scrollToUp {
    0% {
      background-position-y: 0px;
    }

    100% {
      background-position-y: -40px;
    }
  }

  .lmy-block h2 img {
    height: 38px;
    width: 25px;
  }

  .lmy-block p {
    font-size: 16px;
    color: #fff;
    padding-top: 5px;
  }

</style>
